<template>
  <div class="seckillWrap">

    <!-- 底部tabbar -->
    <div class="tabWrapper">
      <div
        class="tabItem"
        :data-type="type"
        @click="tabChange(1)"
      ><img :src="isSpikeAct?spikeIcon[1]:spikeIcon[0]">
        <p :class="{'actText':isSpikeAct,'text':!isSpikeAct}">秒杀商品</p>
      </div>
      <div
        class="tabItem"
        :data-type="type"
        @click="tabChange(2)"
      ><img :src="ismyGoodsAct?goodsIcon[1]:goodsIcon[0]">
        <p :class="{'actText':ismyGoodsAct,'text':!ismyGoodsAct}">我的商品</p>
      </div>
    </div>

    <!-- 秒杀商品 -->
    <div
      class="seckillGoods"
      v-if="isSpikeAct"
    >
      <div class="bannerPic">
        <img :src="imgBaseUrl+'image/postal/actCenter/banner.png'">
      </div>
      <div class="two">
        <P v-if="jjms">即将秒杀</P>
        <P v-if="zzmsVfTime()">正在秒杀</P>
        <P
          class="seckillOver"
          v-if="msjs"
        >秒杀结束</P>

        <div
          class="timeWrap"
          v-if="jjmsVfTime()"
        >
          <div
            class="txtStart"
            v-if="jjms"
          >距开始</div>

          <div
            class="txtStart"
            v-else
          >距结束</div>
          <div class="green">{{d>9?d:'0'+d}}</div>:
          <div class="green">{{h>9?h:'0'+h}}</div>:
          <div class="green">{{m>9?m:'0'+m}}</div>:
          <div class="green">{{s>9?s:'0'+s}}</div>
        </div>
      </div>

      <!-- 秒杀商品  之 产品列表 -->
      <div class="contentWrap">
        <div
          class="content"
          v-for="item in dataList"
          :key="item.id"
        >
          <img :src="imgBaseUrl+item.ico">
          <div class="center">
            <p class="title">{{item.title}}</p>
            <div class="botWrapper">
              <div class="bot">
                <div class="rest">剩余{{item.limitNum}}</div>
                <p class="coin">{{item.coin}}积分</p>
                <p class="price">原价：{{item.price}}元</p>
              </div>

              <button
                class="btn"
                :class="{'btnG':item.limitNum<=0 || msjs || jjms ,'btnR':zzms && item.limitNum>0}"
                @click="toSeckill(item.id, item.limitNum)"
              >{{jjms? '即将秒杀' : msjs? '秒杀结束' : item.limitNum >= 0 ? '已抢光':'正在秒杀'}}</button>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!--我的商品  -->
    <div
      class="mygoodsWrap"
      v-if="ismyGoodsAct"
    >
      <div class="mygoodsTop">
        <img
          :src="imgBaseUrl+mySpikeList[0].ico"
          alt=""
        >
        <div class="right">
          <p class="title">{{mySpikeList[0].title}}</p>
          <p>数量: <span class="red"> 1 </span>张</p>
          <p class="red">{{mySpikeList[0].coin}}积分 <span class="price">原价：{{mySpikeList[0].oPrice}}元</span> </p>
          <p class="timer">兑换有效期至：2019-8-31</p>
        </div>
      </div>
      <div class="btnWrap">
        <button @click="goDetail(mySpikeList[0].id)">使用规则</button>
        <router-link :to="mySpikeList[0].state==='0'?{path:'/points/detail/status',query:{order:mySpikeList[0].id,id:mySpikeList[0].productId}}:{path:'/write-off',query:{id:mySpikeList[0].id}}">
          <button>立即核销</button>
        </router-link>
      </div>

    </div>

    <!-- 规则 -->
    <img
      class="rule"
      :src="imgBaseUrl+'image/postal/actCenter/rule.png'"
      @click="goRuleDetail()"
      v-if="isSpikeAct"
    >
    <!-- 规则弹窗 -->
    <div
      class="ruleWrap"
      v-if="openRule"
    >
      <div><img
          src="@/assets/images/close.png"
          class="closeBtn"
          @click="closeRule()"
        > </div>
      <div class="ruleBorder">
        <div class="ruleContent">
          <p>1、活动时间</p>
          <p>即日起至2019年12月31日</p>
          <p class="marTop">2、活动对象</p>
          <p>日均金融资产大于等于1万元的借记卡持卡人（金融资产=人民币存款+保险+理财+基金）</p>
          <p class="marTop">3、活动规则</p>
          <p>(1) 每个用户仅可抢购1张。</p>
          <p>(2) 产品数量有限，先抢先得，抢完即止。</p>
          <p class="marTop">4、温馨提示</p>
          <p>(1) 如果有任何问题，请联系客服400-1808-580。</p>
          <p>(2) 在法律允许的范围内，本活动最终解释权归交通银行厦门分行所有。</p>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
// import { List, Tabs, Tab } from 'vant';
import { imgBaseUrl } from '@/config/env.js';
import { Toast } from 'vant';
export default {
  data() {
    return {
      imgBaseUrl,
      openRule: false,
      spikeIcon: [
        require('@/assets/images/spike.png'),
        require('@/assets/images/spike_act.png')
      ],
      goodsIcon: [
        require('@/assets/images/mygoods.png'),
        require('@/assets/images/mygoods_act.png')
      ],
      isSpikeAct: false, // 秒杀商品开关
      ismyGoodsAct: false, // 我的商品开关
      activitySource: '', // 接收前页传来的参
      startDate: '', // 接收前页传来的参
      endDate: '', // 接收前页传来的参
      dataList: {},
      mySpikeList: {}, // 秒杀到的商品列表
      d: '', // 天
      h: '', // 时
      m: '', // 分
      s: '', // 秒
      jjms: false, // 即将秒杀按钮
      zzms: false, // 正在秒杀按钮
      msjs: false, // 秒杀结束按钮
      type: 1,
      id: '', // 我的商品中的产品id
      productId: '' // 我的商品中的产品id
    };
  },

  mounted() {
    this.activitySource = this.$route.query.activitySource; // 接收首页传来的活动类型
    this.startDate = this.$route.query.startDate; // 接收首页传来的开始时间
    this.endDate = this.$route.query.endDate; // 接收首页传来的结束时间
    this.tabChange(parseInt(this.type)); // 进入秒杀页面，自动获取type=1
    this.type = this.$route.query.type; // 接收成功页传来的类型
    this.tabChange(parseInt(this.type)); // 成功页传来后，调此方法

    this.countDown();
    this.spikeList(); // 秒杀到的商品列表

    this.$http
      .post('/product/list', {
        activitySource: this.activitySource,
        productType: '1',
        pageNum: 0,
        pageSize: 1000
      })
      .then(res => {
        if (res.data.code === '0' && res.data.object) {
          this.dataList = res.data.object.list;
        }
      });
  },

  methods: {
    // 即将秒杀的v-if函数
    zzmsVfTime() {
      if (
        new Date().getTime() >=
          new Date(this.startDate.replace(/-/g, '/')).getTime() &&
        new Date().getTime() <
          new Date(this.endDate.replace(/-/g, '/')).getTime()
      ) {
        return true;
      } else {
        return false;
      }
    },

    // 结束秒杀的v-if函数
    jjmsVfTime() {
      if (
        new Date().getTime() <
          new Date(this.startDate.replace(/-/g, '/')).getTime() ||
        (new Date().getTime() >=
          new Date(this.startDate.replace(/-/g, '/')).getTime() &&
          new Date().getTime() <
            new Date(this.endDate.replace(/-/g, '/')).getTime())
      ) {
        return true;
      } else {
        return false;
      }
    },

    // 我的商品页  使用规则按钮
    goDetail(e) {
      console.log(e);
      this.$http
        .post('spikeProduct/detail', {
          id: this.productId.toString()
        })
        .then(res => {
          // console.log(res.data.code);
          if (res.data.code === '0' && res.data.object) {
            this.$router.push({
              path: '/actDetail',
              query: { id: this.productId }
            });
          } else {
            Toast(res.data.message);
          }
        });
    },

    // 秒杀到的商品列表
    spikeList() {
      this.$http
        .post('/order/spikeList', { pageNum: '0', pageSize: '500' })
        .then(res => {
          if (res.data.list) {
            this.mySpikeList = res.data.list;
            this.productId = res.data.list[0].productId;
          }
        });
    },
    // 规则弹窗
    goRuleDetail() {
      this.openRule = true;
    },
    // 关闭规则弹窗
    closeRule() {
      this.openRule = false;
    },

    // 获取倒计时
    countDown(it) {
      // var interval =
      setInterval(() => {
        const nowTime = new Date().getTime();
        // console.log('当下时间', nowTime);
        // console.log('没转换的开始时间', this.startDate);
        // console.log('没转换的结束时间', this.endDate);

        const startDate = new Date(this.startDate.replace(/-/g, '/')).getTime();
        // this.startDate = startDate;
        // console.log('转换后的开始时间', startDate);

        const endDate = new Date(this.endDate.replace(/-/g, '/')).getTime();
        // console.log('转换后的结束时间', endDate);
        // this.endDate = endDate;

        if (nowTime < startDate) {
          // 即将秒杀
          this.jjms = true;
          this.state = 'jjms';
          const time = (startDate - nowTime) / 1000; // 获取天、时、分、秒
          this.d = parseInt(time / (60 * 60 * 24));
          this.h = parseInt((time % (60 * 60 * 24)) / 3600);
          this.m = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
          this.s = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
        } else if (nowTime >= startDate && nowTime < endDate) {
          // 正在秒杀
          this.zzms = true;
          this.state = 'zzms';
          const time = (endDate - nowTime) / 1000; // 获取天、时、分、秒
          this.d = parseInt(time / (60 * 60 * 24));
          this.h = parseInt((time % (60 * 60 * 24)) / 3600);
          this.m = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
          this.s = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
        } else {
          // 秒杀结束
          this.msjs = true;
          this.state = 'msjs';
        }
        // clearInterval(interval);
      }, 100);
    },

    // 底部导航切换
    tabChange(type) {
      if (type === 1) {
        this.isSpikeAct = true;
        this.ismyGoodsAct = false;
      } else if (type === 2) {
        this.ismyGoodsAct = true;
        this.isSpikeAct = false;
      }
    },

    // 点击立即秒杀
    toSeckill(e, limitNum) {
      if (this.jjms) {
        Toast('即将秒杀，敬请期待哦~');
      }
      if (this.msjs) {
        Toast('对不起，秒杀已结束，下回再来哦~');
      }
      if (limitNum === 0) {
        Toast('对不起，已抢光，下回再来哦~');
      }
      if (this.zzms && limitNum > 0) {
        this.$router.push({
          path: '/actDetail',
          query: { id: e }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
// 规则及弹窗
.rule {
  width: 1.39rem;
  height: 0.53rem;
  background-color: #030303;
  border-radius: 0.27rem 0rem 0rem 0.27rem;
  opacity: 0.3;
  position: fixed;
  top: 0.3rem;
  right: 0rem;
}
.ruleWrap {
  width: 100%;
  height: 17.79rem;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  .closeBtn {
    width: 0.76rem;
    height: 0.76rem;
    position: absolute;
    top: 2.5rem;
    right: 0.4rem;
  }
  .ruleBorder {
    width: 8.67rem;
    background-color: #ffffff;
    border-radius: 0.11rem;
    color: #282828;
    font-size: 0.32rem;
    position: absolute;
    top: 20%;
    left: 7%;
    padding: 0.6rem 0.67rem;
    .ruleContent {
      .marTop {
        margin-top: 0.2rem;
      }
    }
  }
}

// 底部tabbar
.tabWrapper {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  width: 100%;
  height: 1.33rem;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  .tabItem {
    width: 50%;
    border-right: 1px solid #cccccc;
    img {
      width: 0.54rem;
      height: 0.54rem;
      margin-right: 0.1rem;
    }
    p {
      display: inline-block;
      font-size: 0.4rem;
    }
  }
}
.Text {
  color: #646464;
}
.actText {
  color: #37bc76;
}

// 秒杀商品
.bannerPic {
  width: 100%;
  height: 4rem;
  background-color: #ffffff;
}
.two {
  width: 10rem;
  height: 1.73rem;
  background-color: #ffffff;
  box-shadow: 0rem 0.03rem 0rem 0rem rgba(195, 192, 192, 0.35);
  border-bottom: 1px solid #cccccc;
  p {
    text-align: center;
    font-size: 0.48rem;
    color: #fa0000;
    font-weight: 600;
    padding-top: 0.29rem;
  }
  .timeWrap {
    display: flex;
    justify-content: center;
    color: #565656;
    font-size: 0.4rem;
    font-weight: 600;
    .txtStart {
      font-size: 0.44rem;
      color: #565656;
      margin-right: 0.39rem;
    }
    .green {
      width: 0.63rem;
      height: 0.53rem;
      background-color: #28b46a;
      border-radius: 0.07rem;
      text-align: center;
      font-size: 0.33rem;
      color: #fdfcfb;
    }
  }
  .seckillOver {
    color: #565656;
  }
}

// 秒杀商品  之 产品列表
.contentWrap {
  margin-bottom: 2rem;
}
.content {
  display: flex;
  padding: 0.43rem 0.47rem;
  margin-bottom: 0.4rem;
  background-color: #ffffff;

  img {
    width: 3.13rem;
    height: 3.13rem;
    border-radius: 0.11rem;
  }
  .center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    justify-content: flex-start;
    margin-left: 0.4rem;
    .title {
      color: #010101;
      margin-bottom: 0.43rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .botWrapper {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      width: 100%;
      .bot {
        .rest {
          width: 1.56rem;
          height: 0.59rem;
          border-radius: 0.11rem;
          border: solid 0.04rem #ff0000;
          text-align: center;
          font-size: 0.32rem;
          color: #ff0000;
          margin-bottom: 0.3rem;
        }
        .coin {
          line-height: 0.4rem;
          color: #fc0303;
          margin-bottom: 0.2rem;
        }
        .price {
          color: #8d8d8d;
          text-decoration: line-through;
        }
      }
    }
  }
  .btn {
    // width: 2rem;
    height: 0.91rem;
    border-radius: 0.11rem;
    border: none;
    // margin-top: 2rem;
    font-size: 0.4rem;
    color: #ffffff;
  }
  .btnG {
    background-color: #c3c3c3;
  }
  .btnR {
    background-color: #fa0000;
  }
}

// 我的商品
.mygoodsWrap {
  background-color: #fff;
}
.mygoodsTop {
  display: flex;
  padding: 0.53rem;

  border-bottom: 1px solid #cccccc;
  img {
    width: 3.07rem;
    height: 3.07rem;
    border-radius: 0.11rem;
    margin-right: 0.3rem;
  }
  .right {
    font-size: 0.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .title {
      color: #010101;
    }
    .price {
      font-size: 0.35rem;
      color: #8d8d8d;
      text-decoration: line-through;
    }
    .timer {
      font-size: 0.37rem;
      color: #7f7d7d;
    }
  }
}
.red {
  color: #fc0303;
}

.btnWrap {
  width: 100%;
  height: 1.35rem;
  display: flex;
  justify-content: flex-end;
  button {
    width: 2.08rem;
    height: 0.8rem;
    border-radius: 0.11rem;
    border: solid 0.03rem #ff0000;
    background-color: #fff;
    color: #ff0000;
    margin-right: 0.2rem;
    margin-top: 0.3rem;
  }
}
</style>
